<template>
  <div class="content">
    <div class="category">
      <!--      <div class="category__item category__item&#45;&#45;active">全部商品</div>-->
      <!--      <div class="category__item">秒杀</div>-->
      <!--      <div class="category__item">新鲜水果</div>-->
      <!--      <div class="category__item">休闲食品</div>-->
      <!--      <div class="category__item">时令蔬菜</div>-->
      <!--      <div class="category__item">肉蛋家禽</div>-->
      <div
        :class="{'category__item':true,'category__item--active':currentTab===item.tab}"
        v-for="item in categories"
        :key="item.name"
        @click="()=>handleTabClick(item.tab)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="product">
      <div
        class="product__item"
        v-for="item in list"
        :key="item._id"
      >
        <img class="product__item__img" :src="item.imgUrl"/>
        <div class="product__item__detail">
          <h4 class="detail__title">{{ item.name }}</h4>
          <p class="detail__sales">月售 {{ item.sales }} 件</p>
          <p class="detail__price">
            <span class="detail__price__yen">&yen;</span>{{ item.price }}
            <span class="detail__price__origin">&yen;{{ item.oldPrice }}</span>
          </p>
        </div>
        <div class="product__item__number">
          <span class="product__item__number__minus iconfont"
                @click="()=>changeCartItem(shopId,item._id,item,-1,shopName)"
          >&#xe691;</span>
          {{ cartList?.[shopId]?.productList?.[item._id]?.count || 0 }}
          <span class="product__item__number__plus iconfont"
                @click="()=>changeCartItem(shopId,item._id,item,1,shopName)"
          >&#xe668;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, ref, toRefs, watchEffect} from "vue";
import {useRoute} from "vue-router";
import {useStore} from "vuex";

import {get} from "../../utils/request";
import {useCommonCartEffect} from "../../effects/cartEffect";

const categories = [{name: '全部商品', tab: 'all'}, {name: '秒杀', tab: 'seckill'}, {name: '新鲜水果', tab: 'fruit'}];

// 和 Tab 切换相关的逻辑
const useTabEffect = () => {
  const currentTab = ref(categories[0].tab);

  const handleTabClick = (tab) => {
    console.log('tab:', tab);
    currentTab.value = tab;
  }

  return {currentTab, handleTabClick}
};

// 列表内容相关的逻辑
const useCurrentListEffect = (currentTab, shopId) => {
  const content = reactive({list: []})

  const getContentData = async (tab) => {
    const result = await get(`/api/shop/${shopId}/products`, {tab: currentTab.value});
    if (result?.errno === 0 && result?.data) {
      content.list = result.data;
    }
  };

  watchEffect(() => {
    getContentData();
  });

  const {list} = toRefs(content);
  return {list}
};

// 购物车相关逻辑
const useCartEffect = () => {
  const store = useStore();

  const {changeCartItemInfo, cartList} = useCommonCartEffect();

  const changeShopName = (shopId, shopName) => {
    store.commit('changeShopName', {shopId, shopName})
  }

  const changeCartItem = (shopId, productId, productInfo, num, shopName) => {
    changeCartItemInfo(shopId, productId, productInfo, num);
    changeShopName(shopId, shopName);
    //console.log('store.state:',store.state);
  }

  return {changeCartItem, cartList}

};

export default {
  name: "Content",
  props: ['shopName'],
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    const {currentTab, handleTabClick} = useTabEffect()
    const {list} = useCurrentListEffect(currentTab, shopId);
    const {changeCartItem, cartList} = useCartEffect();

    return {
      currentTab, categories, handleTabClick, list, shopId, changeCartItem, cartList
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables";
@import "../../style/mixins";

.content {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 1.5rem;
  bottom: .5rem;
}

.category {
  width: .76rem;
  height: 100%;
  overflow-y: scroll;
  background: $search-bgColor;

  &__item {
    line-height: .4rem;
    text-align: center;
    font-size: .14rem;
    color: $content-fontColor;

    &--active {
      background: $bgColor;
    }
  }
}

.product {
  overflow-y: scroll;
  flex: 1;

  &__item {
    position: relative;

    display: flex;
    padding: .12rem 0;
    margin: 0 .16rem;
    border-bottom: .01rem solid $content-bgColor;

    &__img {
      width: .68rem;
      height: .68rem;
      margin-right: .16rem;
    }

    &__detail {
      overflow: hidden;

      .detail__title {
        margin: 0;
        line-height: .2rem;
        font-size: .14rem;
        color: $content-fontColor;

        @include ellipsis();
      }

      .detail__sales {
        margin: .06rem 0;
        font-size: .12rem;
        color: $content-fontColor;
      }

      .detail__price {
        margin: 0;
        line-height: .2rem;
        font-size: .14rem;
        color: $highlight-fontColor;

        &__yen {
          font-size: .12rem;
        }

        &__origin {
          margin-left: .06rem;
          line-height: .2rem;
          font-size: .12rem;
          color: $light-fontColor;
          text-decoration: line-through;
        }
      }
    }

    &__number {
      position: absolute;
      right: 0;
      bottom: .12rem;

      line-height: .18rem;

      &__minus, &__plus {
        //display: inline-block;
        //width: .2rem;
        //height: .2rem;
        //border-radius: 50%;
        //
        //font-size: .2rem;
        //text-align: center;
        //line-height: .16rem;
      }

      &__minus {
        //border: .01rem solid $medium-fontColor;
        color: $medium-fontColor;
        margin-right: .05rem;

        position:relative;
        top:.02rem;
      }

      &__plus {
        //background: $btn-bgColor;
        //color: $bgColor;
        margin-left: .05rem;

        color: $btn-bgColor;

        position:relative;
        top:.02rem;
      }
    }
  }
}
</style>
